<template>
  <div class="search-container scroll-container">
    <Tab
      @getActive="getActive"
      active="song"
      class="search-tab">
      <template #content>
        <el-tab-pane
          label="歌曲"
          name="song">
          <div class="song">
            <div class="operation-top">
              <PlayButton :songs="seachResult" />
              <DecoratedButton
                name="下载"
                icon="&#xf0304;" />
              <DecoratedButton
                name="批量操作"
                icon="&#xe617;" />
            </div>
            <SongList
              :songs="seachResult"
              height="440px" />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="视频"
          name="video">
          <Loading
            :is-loading="isLoading"
            v-if="isLoading" />
          <NoSearch v-if="videoResult.length == 0" />
          <Mv :mvs="videoResult" />
        </el-tab-pane>
        <el-tab-pane
          label="专辑"
          name="album">
          <Loading
            :is-loading="isLoading"
            v-if="isLoading" />
          <NoSearch v-if="albumResult.length == 0" />
          <Albums :albums="albumResult" />
        </el-tab-pane>
        <el-tab-pane
          label="歌单"
          name="playList">
          <Loading
            :is-loading="isLoading"
            v-if="isLoading" />
          <NoSearch v-if="playlistResult.length == 0" />
          <PlayList
            :playlists="playlistResult"
            title="" />
        </el-tab-pane>
        <el-tab-pane
          label="歌手"
          name="singer">
          <NoSearch v-if="singerResult.length == 0" />
          <div class="singers">
            <Singer :singer-list="singerResult" />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="歌词"
          name="songWord">
          <NoSearch v-if="videoResult.length == 0" />
        </el-tab-pane>

        <el-tab-pane
          label="用户"
          name="user">
          <NoSearch v-if="videoResult.length == 0" />
        </el-tab-pane>
      </template>
    </Tab>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, inject, Ref } from 'vue';
import { useRoute } from 'vue-router';
import { MV, Song, Album, Playlist, Artist } from '../model';
import { elMessageType } from '../model/enum';
import { elMessage, getMusicUrls, formatTime } from '../utils/util';
import { searchMusic } from '../api/api';
import PlayButton from '../components/PlayButton.vue';
import DecoratedButton from '../components/DecoratedButton.vue';
import Tab from '../components/Tab.vue';
import Mv from '../components/Mv.vue';
import Albums from '../components/Albums.vue';
import PlayList from '../components/PlayList.vue';
import Loading from '../components/Loading.vue';
import Singer from '../components/Singer.vue';
import useConfigStore from '../store/config';
import NoSearch from '../components/NoSearch.vue';
import { storeToRefs } from 'pinia';
const config = useConfigStore();
const { showScroll, left } = storeToRefs(config);
const route = useRoute();
//获取搜索关键词
const keyWord = route.query.keyWord;
//搜索的结果
const seachResult = reactive<Song[]>([]);
//加载数据的动画
const isLoading = ref<boolean>(false);
//页面第一次加载的动画
const first = inject<Ref<boolean>>('firstLoading');
first!.value = true;
//视频搜索结果
const videoResult = reactive<MV[]>([]);
//专辑搜索解构
const albumResult = reactive<Album[]>([]);
//歌单搜索结果
const playlistResult = reactive<Playlist[]>([]);
//歌手的搜索结果
const singerResult = reactive<Artist[]>([]);

//获取搜索结果
searchMusic(1, 40, keyWord + '')
  .then((response: any) => {
    const {
      result: { songs },
    } = response;
    //获取搜索歌曲
    if (songs) {
      const ids: string[] = [];
      songs.forEach((item: any) => {
        const { id, name, artists, album, fee } = item;
        ids.push(id);
        seachResult.push({
          id: id,
          name: name,
          singer: artists.map((data: any) => data.name).join(','),
          songImage: artists[0].img1v1Url,
          album: album.name,
          available: fee,
          url: '',
          time: '',
        });
      });
      //获取搜索歌曲的urls
      getMusicUrls(ids.join(','), seachResult);
    }
    first!.value = false;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });

const getActive = (active: string) => {
  showScroll.value = 'none';
  left.value = '0px';
  if (active == 'video' && videoResult.length == 0) {
    isLoading.value = true;
    searchMusic(1004, 60, keyWord + '')
      .then((response: any) => {
        const {
          result: { mvs },
        } = response;
        if (mvs) {
          mvs.forEach((item: any) => {
            const { id, name, cover, artistName, playCount } = item;
            videoResult.push({
              id,
              name,
              image: cover,
              artist: artistName,
              playCount,
            });
          });
        }
        isLoading.value = false;
      })
      .catch((err: any) => {
        elMessage(elMessageType.ERROR, err.message);
      });
  } else if (active == 'album' && albumResult.length == 0) {
    isLoading.value = true;
    searchMusic(10, 60, keyWord + '')
      .then((response: any) => {
        const {
          result: { albums },
        } = response;
        if (albums) {
          albums.forEach((item: any) => {
            const { id, name, picUrl, publishTime, artist } = item;
            albumResult.push({
              id,
              name,
              cover: picUrl,
              publishTime: formatTime(publishTime),
              artistId: artist.id,
            });
          });
        }
        isLoading.value = false;
      })
      .catch((err: any) => {
        elMessage(elMessageType.ERROR, err.message);
      });
  } else if (active == 'playList' && playlistResult.length == 0) {
    isLoading.value = true;
    searchMusic(1000, 60, keyWord + '')
      .then((response: any) => {
        const {
          result: { playlists },
        } = response;
        if (playlists) {
          playlists.forEach((item: any) => {
            const { id, name, coverImgUrl, playCount } = item;
            playlistResult.push({
              id,
              name,
              image: coverImgUrl,
              playCount,
              description: '',
              tag: [],
              creator: { nickname: '', avatarUrl: '' },
            });
          });
        }
        isLoading.value = false;
      })
      .catch((err: any) => {
        elMessage(elMessageType.ERROR, err.message);
      });
  } else if (active == 'singer' && singerResult.length == 0) {
    isLoading.value = true;
    searchMusic(100, 60, keyWord + '')
      .then((response: any) => {
        const {
          result: { artists },
        } = response;
        if (artists) {
          artists.forEach((item: any) => {
            const { id, name, picUrl, accountId } = item;
            singerResult.push({
              id,
              name,
              avatar: picUrl,
              score: accountId,
            });
          });
        }
        isLoading.value = false;
      })
      .catch((err: any) => {
        elMessage(elMessageType.ERROR, err.message);
      });
  }
};
</script>

<style lang="less" scoped>
.search-container {
  .loading {
    position: absolute;
    top: 0;
    z-index: 100;
  }
  .mv {
    width: 80vw;
    &:deep(.mv-simi) {
      width: 80vw;
    }
    &:deep(.mv-recommend) {
      width: 232px;
    }
  }

  .singers {
    display: flex;
    width: 80vw;
    flex-wrap: wrap;
    &:deep(.singer .el-image) {
      width: 187.5px;
    }
  }

  .playlist {
    @common: 186px;
    &:deep(.content) {
      width: 80vw;
    }
    &:deep(.content .list .mask) {
      width: @common;
      height: @common;
    }
    &:deep(.content .list .playcount) {
      top: 155px;
    }
    &:deep(.content .list .el-image) {
      width: @common;
      height: @common;
    }
    &:deep(.content .list .name) {
      width: @common;
    }
  }

  .operation-top {
    margin: 15px 0;
  }
  .search-tab {
    &:deep(.el-tab-pane) {
      position: relative;
    }
    &:deep(.el-tabs__active-bar) {
      left: 5.5px;
    }
  }
}
</style>
